<template>
  <div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <h2>库存一览</h2>
      </div></el-col>
    </el-row>

    <el-dialog
        :visible.sync="FindByProductId1"
        width="60%"
        @opened="open"
    >
      <FindByProductId :movie-id="FindByProductIdId" v-if="FindByProductId2" ref="FindByProductIdRef"></FindByProductId>
    </el-dialog>

    <el-dialog
        :visible.sync="updateProductSell1"
        width="60%"
        @opened="open"
    >
     <UpdateProductSell :movie-id="updateProductSellId" v-if="updateProductSell2" ref="updateProductSellRef"></UpdateProductSell>
    </el-dialog>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-table
              :data="tableData"
              highlight-current-row
              @current-change="handleCurrentChange"
              style="width: 100%">
            <el-table-column
                prop="productBean.productName"
                label="商品名称"
                align="center">
            </el-table-column>
            <el-table-column
                prop="productBean.productClass"
                label="类别"
                align="center">
            </el-table-column>
            <el-table-column
                prop="productBean.productFirm"
                label="厂家"
                align="center">
            </el-table-column>
            <el-table-column
                prop="number"
                label="库存数量"
                align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="block">
            <el-pagination
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="currentPageFn"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 50px">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-button type="primary" plain style="margin-right: 20px" @click="findByProductId">商 品 详 情</el-button>
          <br>
          <el-button type="primary" plain style="margin-top: 50px;margin-right: 5px" @click="updateProductSell">修 改 销 售 价</el-button>
        </div>
      </el-col>

      <el-col :span="9">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="margin-right: 60px">查询商品</span>
              <el-row style="margin-top: 15px">
                <el-col :span="7" class="labClass">
                  <div class="grid-content bg-purple">
                   商品名称：
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <el-input v-model=" productName" placeholder="请输入内容" class="labClass"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row style="margin-top: 15px">
                <el-col :span="7" class="labClass">
                  <div class="grid-content bg-purple">
                    类别：
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <el-input v-model="productClass" placeholder="请输入内容" class="labClass"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row style="margin-top: 10px">
                <el-col :span="7" class="labClass">
                  <div class="grid-content bg-purple">
                    起始数量：
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <el-input v-model="startNumber" placeholder="请输入内容" class="labClass"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row style="margin-top: 15px">
                <el-col :span="7" class="labClass">
                  <div class="grid-content bg-purple">
                    结束数量：
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <el-input v-model="endNumber" placeholder="请输入内容" class="labClass"></el-input>
                  </div>
                </el-col>
              </el-row>

            </div>
            <el-button type="primary" plain style="margin-right: 20px" @click="init">查询</el-button>
          </el-card>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import FindByProductId from "./findByProductId";
import UpdateProductSell from "./updateProductSell";
export default {
  name: "inventory",
  components: {FindByProductId,UpdateProductSell},
  data(){
    return{
      tableData:[],
      total: 0,
      pageSize: 4,
      currentPage: 1,

      currentRow:'',

      productName:'',
      startNumber:0,
      productClass:'',
      endNumber:0,

      FindByProductId1:false,
      FindByProductIdId:0,
      FindByProductId2:false,

      updateProductSell1:false,
      updateProductSellId:0,
      updateProductSell2:false

    }
  },
  mounted() {
    this.init()
  },
  methods:{
    handleCurrentChange(val){
      this.currentRow=val;
    },
    init(){
      let params={
        current:this.currentPage,
        size:this.pageSize,
        productName:this.productName,
        startNumber:this.startNumber,
        endNumber:this.endNumber,
        productClass:this.productClass
      }
      this.$axios.get('drp/stock/findBySupplierItem', {params: params}).then(
          r => {
            this.tableData = r.data.records;
            this.total = r.data.total;
          }
      )
    },
    currentPageFn(currentPage){
      this.currentPage=currentPage
      this.init()
    },
    open(){
      console.log("客户打开了")
    },
    findByProductId(){
      if (this.currentRow==''){
        this.$message.warning("请选中一行")
      }else {
        this.FindByProductId1=true
        this.FindByProductId2=true
        this.$nextTick(()=>{
          this.$refs.FindByProductIdRef.init(this.currentRow)
        })
      }
    },
    updateProductSell(){
      if (this.currentRow==''){
        this.$message.warning("请选中一行")
      }else {
        this.updateProductSell1=true
        this.updateProductSell2=true
        this.$nextTick(()=>{
          this.$refs.updateProductSellRef.init(this.currentRow)
        })
      }
    }
  }
}
</script>

<style scoped>

</style>